<template>
  <el-card style="margin: 20px">
    <div>
      <span> 试题录入</span>
    </div>
    <div>
      <el-form label-width="100px">
        <el-form-item label="学科：">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录：">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业：">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向：">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型：">
          <el-radio-group v-model="radio">
            <el-radio :label="3">简单</el-radio>
            <el-radio :label="6">多选</el-radio>
            <el-radio :label="9">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度：">
          <el-radio-group v-model="radio1">
            <el-radio :label="3">简单</el-radio>
            <el-radio :label="6">一般</el-radio>
            <el-radio :label="9">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干：">
          <quillEditor
            :options="editorOption"
            v-model="formfull.articleBody"
            @blur="$refs.formRef.validateField('content')"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="选项：">
          <el-form>
            <el-form-item>
              <el-radio-group v-model="radio1">
                <el-radio :label="3"
                  >A: <el-input></el-input>
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="radio2">
                <el-radio :label="3">B:</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="radio3">
                <el-radio :label="3">C:</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="radio4">
                <el-radio :label="3">D:</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="解析视频：">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="答案解析：">
          <quillEditor
            :options="editorOption"
            v-model="formfull.articleBody"
            @blur="$refs.formRef.validateField('content')"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="题目备注：">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="试题标签：">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">确认提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
export default {
  components: { quillEditor },
  data() {
    return {
      imageUrl: "",
      formfull: {
        region: "",
      },
      form: {
        region: "",
      },
      radio: "",
      radio1: "",
      radio2: "",
      radio3: "",
      radio4: "",
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
              [{ align: [] }], // 对齐方式-----[{ align: [] }]
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ direction: "ltl" }], // 文本方向-----[{'direction': 'rtl'}]
              [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
              [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
              [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
              // ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
              ["clean"], // 清除文本格式-----['clean']
              ["link", "image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
            ],
          },
        },
      },
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.ql-editor) {
  min-height: 200px;
}
</style>
